<template>
  <div class="home">
    <van-card
    centered
  :price="content.sell_price"
  :title="content.title"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
</van-card>
   
    <sku :sku-data="skuList" :spec-data="specList" @on-change="onSkuChange" @on-select="onSkuSelect" />
   <van-stepper tag='div'  :max="content.stock_quantity" class="fl" v-model="sum" theme="round" button-size="20" disable-input />
   <div style="font-size:0.7em;">购买数量</div>
     <van-divider
  :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
>
  其他信息
</van-divider>
  <div class="quantity">
    <p>商品货号:{{content.goods_no}}</p>
    <p>库存情况:{{content.stock_quantity}}件</p>
    <p>上架时间:{{$filters.dataformat(content.add_time)}}</p>
  </div>
  </div>
    <van-action-bar>
  <van-action-bar-button color="#be99ff" @click="cartshop"  type="warning" text="加入购物车" />
  <van-action-bar-button color="#7232dd"  type="danger" text="立即购买" />
</van-action-bar>
</template>

<script>
import sku from '@/components/sku'
import { ref } from 'vue';
import{ useStore } from 'vuex'
  export default {
    name: 'tosku',
    emits:['clicked'],
    components: { sku },
    props:{
      content:Object
    },
    data() {
      return {
        skuData: [
          {
            'id': 390,
            'uniqid': 'fCyn1mKj4zzL',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '89392246,39096481,85468638',
            'value': '红色,s,秋季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 1,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['89392246', '39096481', '85468638'],
              'value': ['红色', 's', '秋季']
            }
          },
          {
            'id': 391,
            'uniqid': '5ammbe5uf8eG',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '89392246,39096481,80386662',
            'value': '红色,s,夏季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['89392246', '39096481', '80386662'],
              'value': ['红色', 's', '夏季']
            }
          },
          {
            'id': 392,
            'uniqid': 'Kf01eC8K5eKH',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '89392246,39096481,29551310',
            'value': '红色,s,四季可穿',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['89392246', '39096481', '29551310'],
              'value': ['红色', 's', '四季可穿']
            }
          },
          {
            'id': 393,
            'uniqid': 'yb4b80rDOXKr',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '89392246,34394082,85468638',
            'value': '红色,m,秋季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 0,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['89392246', '34394082', '85468638'],
              'value': ['红色', 'm', '秋季']
            }
          },
          {
            'id': 394,
            'uniqid': 'yrLuz5mXWzvz',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '89392246,34394082,80386662',
            'value': '红色,m,夏季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['89392246', '34394082', '80386662'],
              'value': ['红色', 'm', '夏季']
            }
          },
          {
            'id': 395,
            'uniqid': '94u1uv5SHuP1',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '89392246,34394082,29551310',
            'value': '红色,m,四季可穿',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['89392246', '34394082', '29551310'],
              'value': ['红色', 'm', '四季可穿']
            }
          },
          {
            'id': 396,
            'uniqid': 'yTvP1G1uvrfu',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '96975150,39096481,85468638',
            'value': '黑色,s,秋季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 0,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['96975150', '39096481', '85468638'],
              'value': ['黑色', 's', '秋季']
            }
          },
          {
            'id': 397,
            'uniqid': '9ai5eyG1SC0O',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '96975150,39096481,80386662',
            'value': '黑色,s,夏季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 0,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['96975150', '39096481', '80386662'],
              'value': ['黑色', 's', '夏季']
            }
          },
          {
            'id': 398,
            'uniqid': 'L5KSPHqfWHTr',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '96975150,39096481,29551310',
            'value': '黑色,s,四季可穿',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['96975150', '39096481', '29551310'],
              'value': ['黑色', 's', '四季可穿']
            }
          },
          {
            'id': 399,
            'uniqid': 'LXKa4qnbur10',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '96975150,34394082,85468638',
            'value': '黑色,m,秋季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['96975150', '34394082', '85468638'],
              'value': ['黑色', 'm', '秋季']
            }
          },
          {
            'id': 400,
            'uniqid': 'PnXCuzfm1Kzz',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '96975150,34394082,80386662',
            'value': '黑色,m,夏季',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['96975150', '34394082', '80386662'],
              'value': ['黑色', 'm', '夏季']
            }
          },
          {
            'id': 401,
            'uniqid': 'Ljen54SvDXai',
            'retail_uniqid': null,
            'aid': null,
            'shop_item_id': 30,
            'key': '49660641,44220869,70473703',
            'key_value': '96975150,34394082,29551310',
            'value': '黑色,m,四季可穿',
            'specification': '',
            'sales': 0,
            'price': '99.00',
            'cost': '49.00',
            'marketprice': '159.00',
            'supply_price': '79.00',
            'stock': 999,
            'status': 1,
            'spec': {
              'key_id': ['49660641', '44220869', '70473703'],
              'value_id': ['96975150', '34394082', '29551310'],
              'value': ['黑色', 'm', '四季可穿']
            }
          }
        ],
        specData: [
          {
            'shop_item_id': 30,
            'key': '49660641',
            'key_name': '颜色',
            'value': [89392246, 96975150],
            'value_name': ['红色', '黑色'],
            'image': null,
            'store_id': 2
          },
          {
            'shop_item_id': 30,
            'key': '44220869',
            'key_name': '尺码',
            'value': [39096481, 34394082,132132151],
            'value_name': ['s', 'm','xl'],
            'image': null,
            'store_id': 2
          },
          {
            'shop_item_id': 30,
            'key': '70473703',
            'key_name': '款式',
            'value': [85468638, 80386662, 29551310,2626],
            'value_name': ['秋季', '夏季', '四季可穿','128G'],
            'image': null,
            'store_id': 2
          }
        ]
      }
    },    setup(props,content){
          const sum = ref(1);
          const store = useStore()
          const cartshop = ()=>{
              store.commit('addcartdata',{id:props.content.id,num:sum.value,selected:true,price:props.content.sell_price})
              content.emit('clicked')
          }
          return  {
            sum,
            cartshop
          }
    },
    computed: {
      // 过滤sku列表，保留库存大于0的作为可选项
      skuList() {
        const data = []
        this.skuData.filter(item => item.stock > 0).forEach(item => {
          const option = {
            ...item,
            spec: item.spec.value.map((spec, index) => ({
              key_id: +item.spec.key_id[index],
              value_id: +item.spec.value_id[index],
              value: item.spec.value[index]
            }))
          }
          data.push(option)
        })
        return data
      },
      specList() {
        return this.specData.map(items => ({
          id: +items.key,
          value: items.key_name,
          spec: items.value.map((el, index) => ({
            id: +items.value[index],
            value: items.value_name[index]
          }))
        }))
      }
    },
    created() {
    },
    methods: {
      onSkuChange(res) {
        console.log(res)
      },
      onSkuSelect(res) {
        console.log(res)
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep  .van-card__price{
  color: rgb(236, 47, 47);
    font-size: 1rem;
}
::v-deep .van-card__price-integer{
  font-size: 1rem;
}
.quantity{
  font-size: 00.7rem;
  padding-bottom: 2rem;
}
  .row {
    display: flex;
  }

  .label {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #333333;
    width: 100px;
    text-align: right;
    padding: 10px 0;
    font-weight: bold;
  }

  .content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  .spec {
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #dddddd;
    text-align: center;
    margin: 10px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      border-color: #6c73e2;
      color: #6c73e2;
    }

    &_active {
      border-color: #6c73e2 !important;
      color: #ffffff !important;
      background: #6c73e2 !important;
    }

    &_disabled {
      border-color: #bdbdbd !important;
      color: #ffffff !important;
      background: #bdbdbd !important;
      cursor: not-allowed;
    }
  }
</style>
